import React, { useState, useEffect } from 'react'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, Flex, message, Modal } from 'antd'
import './index.scss'
import LogoUrl from '@/assets/logo.jpg'
import { fetchLoginApi } from '@/store/modules/user'
import { useDispatch } from 'react-redux'
import CODE from '@/apis/code.config'
import apis from '@/apis'
const Login: React.FC = () => {
  const [sarchParams] = useSearchParams()
  const [isAgree, setIsAgree] = useState<boolean>(false)
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  // 表单确定后的回调
  const onFinish = async ({
    username,
    password,
  }: {
    username: string
    password: string
  }) => {
    if (!isAgree) {
      return message.warning('请阅读并勾选提示')
    }
    setBtnLoadings(true)
    const res = await dispatch(fetchLoginApi({ username, password }))
    if (res.code !== CODE.SUCCESS) {
      message.warning(res.message)
    } else {
      message.success('登录成功')
      if (sarchParams.get('redirect')) {
        navigate(sarchParams.get('redirect'))
      } else {
        navigate('/leave')
      }
    }
    setBtnLoadings(false)
  }
  // 选择框的切换
  const changeCheckBox = () => {
    if (!isAgree) {
      setIsModalOpen(true)
    }
    setIsAgree(!isAgree)
  }
  // 弹框的是否显示
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
  const onOkModal = () => {
    setIsModalOpen(false)
    setIsAgree(true)
  }
  const onCancelModal = () => {
    setIsModalOpen(false)
    setIsAgree(false)
  }
  const [btnLoadings, setBtnLoadings] = useState<boolean>(false)
  const [tips, settips]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      settips(res.tips)
    }
    queryInfo()
  }, [])
  let [btnText, setBtnText] = useState('清屏')
  let [showLoginBox, setShowLoginBox] = useState(true)
  const btnTextClick = () => {
    if (btnText === '清屏') {
      setShowLoginBox(false)
      setBtnText('显示')
    } else {
      setBtnText('清屏')
      setShowLoginBox(true)
    }
  }

  return (
    <div className="login-page">
      <Button
        style={{
          width: 50,
          marginTop: 20,
          marginLeft: 20,
        }}
        color="danger"
        onClick={btnTextClick}
      >
        {btnText}
      </Button>
      {showLoginBox && (
        <div className="m-t">
          <img className="Logo" src={LogoUrl} />
          <div className="slogan">欢迎光临我的空间</div>
          <div className="slogan-e">Welcome to my space</div>
          <Form
            name="login"
            onFinish={onFinish}
            form={form}
            style={{ width: 500, marginTop: 30 }}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入账号' }]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入账号"
                maxLength={20}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入秘密' }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                maxLength={20}
                placeholder="请输入秘密"
              />
            </Form.Item>
            <Form.Item>
              <Flex justify="space-between" align="center">
                <Checkbox checked={isAgree} onChange={changeCheckBox}>
                  <span style={{ color: '#1677FF' }}>
                    《这是一条很重要的信息》
                  </span>
                </Checkbox>
                <Flex justify="space-between" align="center">
                  <Link to={'/register/N'}>忘记密码</Link>
                  <Link style={{ marginLeft: 30 }} to={'/register/Y'}>
                    注册账号
                  </Link>
                </Flex>
              </Flex>
            </Form.Item>
            <Form.Item>
              <Button
                loading={btnLoadings}
                block
                type="primary"
                htmlType="submit"
              >
                登录
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                style={{ width: 500 }}
                onClick={() => {
                  form.setFieldsValue({
                    username: 'test',
                    password: '123456',
                  })
                }}
              >
                一键填充账号密码
              </Button>
            </Form.Item>
          </Form>
          <Button
            style={{ width: 500 }}
            color="danger"
            onClick={() => {
              navigate('/')
            }}
          >
            回到首页
          </Button>
        </div>
      )}
      <Modal
        title="这是一条很重要的信息"
        open={isModalOpen}
        onOk={onOkModal}
        onCancel={onCancelModal}
        okText="OK"
        closable={false}
        cancelText="不OK"
      >
        {tips && tips.map((item, index) => <p key={index}>{item}</p>)}
      </Modal>
    </div>
  )
}

export default Login
